<!DOCTYPE html>
<html lang="en">

<head>
	<title>Roll-ups</title>

	<link rel="icon"
		  type="image/png"
		  href="img/favicon.png"/>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/rollup.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<script src="rollup-js/third-party/underscore-min-1.8.3.js"></script>
	<script src="rollup-js/third-party/jquery-min-2.1.3.js"></script>
	<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="rollup-js/third-party/angular-min-1.4.5.js"></script>
	<script src="rollup-js/third-party/angular-strap-min-2.3.3.js"></script>
	<script src="rollup-js/third-party/angular-strap.tpl-min-2.3.3.js"></script>
	<script src="rollup-js/third-party/angular-ui-bootstrap-min-0.14.1.js"></script>
	<script src="rollup-js/third-party/bootbox.js"></script>
	<script src="rollup-js/third-party/bootstrap-tooltip-3.3.5.js"></script>
	<script src="rollup-js/rollupModule.js"></script>
	<script src="rollup-js/kairosdbDatasource.js"></script>
	<script src="rollup-js/rollupController.js"></script>
	<script src="rollup-js/pasteQueryController.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/moment-timezone-with-data.min.js"></script>
</head>

<body ng-app="rollupApp" ng-controller="rollupController">

<div id="page-header">
<div id="logo"><img src='img/kairosdb.png'></div>
<a href="index.html">Query</a>
<a class="active" href="rollups.html">Rollups</a>
<div style="float:right"><span id="lastSaved"
	class="last-saved small"
	ng-hide="lastSaved == null"><span class="glyphicon glyphicon-ok"></span> Last Saved {{lastSaved}}</span>
</div>
</div>
<div class="container-fluid">
	<table class="table table-striped table-bordered" data-sort-name="metric-name"  data-sort-order="asc">
		<thead>
		<tr class="text-info">
			<th></th>
			<th data-field="select" data-sortable="false" style="text-align: center" title="Toggle Select All">
				<input type="checkbox" name="toggleSelect" ng-click="toggleSelectAll($event)"/>
			<th data-field="name" data-sortable="true">
				<span title="{{TOOLTIP_TASK_NAME}}" bs-tooltip="">Name</span></th>
			<th data-field="metric-name" data-sortable="true">
				<span title="{{TOOLTIP_METRIC_NAME}}" bs-tooltip="">Metric</span></th>
			<th data-field="save as"  data-sortable="true">
				<span title="{{TOOLTIP_SAVE_AS}}" bs-tooltip="">Save As</span></th>
			<th data-field="timezone" data-sortable="false">
				<span title="{{TOOLTIP_TIMEZONE}}" bs-tooltip="">Align TZ</span></th>
			<th data-field="execute" data-sortable="true">
				<span title="{{TOOLTIP_EXECUTE}}" bs-tooltip="">Execute</span></th>
			<th data-field="group-by" data-sortable="true">
				<span title="{{TOOLTIP_GROUP_BY}}" bs-tooltip="">Group By</span></th>
			<th data-field="group-by" data-sortable="true">
				<span title="{{TOOLTIP_TAGS}}" bs-tooltip="">Tags</span></th>
			<th data-field="aggregator" data-sortable="true">
				<table>
					<tr>
						<td><span title="{{TOOLTIP_AGGREGATOR}}" bs-tooltip="">Aggregators</span></td>
						<td valign="top" style="padding-left:3px;">
							<span custom-popover
								  popover-html="Sampling is specified as a number and a time unit.
							  For example, '2h' is 2 hours. The unit can be one of the following:
							  <li>ms = millisceconds
							  <li>s = seconds
							  <li>m = minutes
							  <li>h = hours
							  <li>d = days
							  <li>w = weeks
							  <li>M = months
							  <li>y = years"
								  popover-placement="bottom"
								  title="{{TOOLTIP_SAMPLING_HELP}}" data-toggle="tooltip">
							</span>
						</td>
					</tr>
				</table>
			</th>
			<th data-field="buttons" class="no-padding text-center col-md-1"
				data-sortable="true">
				<table class="center-table">
					<tr>
						<td>
							<a href="#" ng-click="addTask()"
							   class="btn btn-primary btn-sm btn-circle"
							   title="{{TOOLTIP_ADD_ROLL_UP}}" bs-tooltip
							   style="margin-right: 3px">
								<span class="glyphicon glyphicon-plus"></span>
							</a>
						</td>
						<td>
							<a href="#" ng-click="pasteQuery()"
							   class="btn btn-primary btn-sm btn-circle"
							   title="{{TOOLTIP_PASTE_QUERY}}" bs-tooltip>
								<span class="glyphicon glyphicon-paste"></span>
							</a>
						</td>
					</tr>
				</table>
			</th>
		</tr>
		</thead>
		<tbody>
 		<tr ng-repeat="task in tasks">
            <td>
                <i class="glyphicon glyphicon-info-sign text-info" title="{{TOOLTIP_COMPLEX}}" bs-tooltip="" ng-show="task.complex"></i>
                <i class="glyphicon glyphicon-warning-sign text-warning" title="{{getIncompleteTooltip()}}" bs-tooltip="" ng-show="!task.complex && task.incomplete"></i>
                <i class="glyphicon glyphicon-check text-success" title="{{TOOLTIP_COMPLETE}}" bs-tooltip="" ng-show="!task.incomplete"></i>
            <a href="#" title="{{TOOLTIP_STATUS}}" ng-click="showStatus(task)" style="padding-left: 5px;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a></td>

			<td style="text-align: center; vertical-align: top">
				<input type="checkbox" value="" ng-checked="task.selected" ng-model="task.selected">
			</td>

			<td>
				<table width="100%">
					<tr>
						<td class="text-columns" style="padding-left: 5px; width:99%;"><editable model="task.name" ng-blur="onBlur(task)"></editable></td>
					</tr>
				</table>
			</td>
			<td class="text-columns">
				<autocompleteeditable model="task.metric_name">{{task.metric_name }}</autocompleteeditable>
			</td>
			<td class="text-columns">
				<editable model="task.save_as">{{ task.save_as }}</editable>
			</td>
			<td class="text-columns">
				<a href=""
				   ng-show="!task.tzEdit"
				   ng-click="task.tzEdit=true"
				   style="color:black;"
				>{{ task.time_zone || "Default: UTC"}}
				</a>
				<span ng-show="task.tzEdit">
					<input type="text" list="tz" name="time_zone" ng-model="task.time_zone_input" ng-change="setTimeZone(task);" />
					<datalist id="tz">
						<select>
							<option ng-repeat="tzName in TZ_NAMES" value="{{tzName}}"></option>
						</select>
					</datalist>
				</span>
			</td>
			<td>
				<span ng-show="task.complex">{{ task.executionType }}</span>
				<a href=""
				   ng-show="!task.executionEdit && !task.complex"
				   ng-click="task.executionEdit=true"
				   style="color:black;"
				>{{ task.executionType }}
				</a>

				<span class="dropdown" ng-show="task.executionEdit">
					<button class="btn btn-default dropdown-toggle"
							type="button" id="executeDropdown"
							data-toggle="dropdown" aria-haspopup="true"
							aria-expanded="true">
						{{ task.executionType }}
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu"
						aria-labelledby="executeDropdown">
						<li ng-repeat="unit in EXECUTION_TYPES">
							<a href="#" ng-click="task.executionEdit=false; setExecution(task, unit)">
								{{ unit }}
							</a>
						</li>
					</ul>
				</span>
			</td>

			<td>
				<autocomplete-with-buttons model="task" on-blur="onBlur(task)" list="suggestTagKeys(task)"/>
			</td>

			<td>
				<autocomplete-tags model="task" on-blur="onBlur(task)" key-list="suggestTagKeys(task)" value-list="suggestTagValues(task)"></autocomplete-tags>
			</td>

			<td>
				<table width="100%">
					<tr ng-repeat="aggregator in task.aggregators track by $index">
						<td>
							<span ng-show="task.complex">{{ toHumanReadableAggregator(aggregator) }}</span>
							<!-- todo att ngif -->
 							<span ng-show="aggregator.edit">
								<aggregator agg="aggregator"
											descriptors="getAggregatorDescriptors()"
											units="SAMPLING_UNITS"
											on-blur="onBlur(task)">
                                </aggregator>
							</span>
							<a href="" ng-show="!aggregator.edit && !task.complex"
							   ng-click="aggregator.edit=true" style="color:black">
								{{ toHumanReadableAggregator(aggregator) }}
							</a>

						</td>
						<td style="width:20%; vertical-align:top; text-align:right; margin-left: 5px; margin-right: 5px">
							<a href="#" class="btn-sm btn-circle text-right"
							   style="padding:0"
							   ng-click="addAggregator(task);scope.renderHtml();"
							   ng-if="$first"
							   ng-show="!aggregator.edit && !model.complex">
								<span class="glyphicon glyphicon-plus shift-1-up"></span>
							</a>

							<a href="#" class="btn-sm btn-circle"
							   style="padding:0"
							   ng-click="removeAggregator(task, $index)"
							   ng-show="task.aggregators.length > 1 && !aggregator.edit && !model.complex">
								<span class="glyphicon glyphicon-remove text-danger"></span>
							</a>
						</td>
					</tr>
				</table>
			</td>
			<td class="text-center">
				<a href="#" ng-click="deleteTaskWithConfirm(task)"
				   ng-show="!task.complex"
				   class="glyphicon glyphicon-remove text-danger"
				   title="{{TOOLTIP_DELETE_ROLLUP}}" bs-tooltip></a>
			</td>
		</tr>
		</tbody>
	</table>
	<button id="small" type="button" class="btn btn-primary" ng-disabled="!anyTasksSelected()" ng-click="deleteSelected()">Delete Selected</button>
</div>

<!--{{ tasks }}-->
<script>
    $(document).ready(function () {
        $("[data-toggle=tooltip]").tooltip();
    });
</script>
</body>
</html>